<template>
  <div class="MainMain">
    <br>
    <p style="margin-top: -7vh">༺功能列表༻</p><br />
    <p style="margin-top: -190px;margin-bottom: -20px;">དོན་སྤྱོད་རྒྱུད་བ།</p>
    <div style="margin-top: 10vh;">
      <ButtonButton style="height: 80px;" :title="function1" id=1 @funcSwitch="funcSwitch"></ButtonButton>

    </div>
    <div style="margin-top: 1vh;margin-bottom: 9vh;">      <ButtonButton style="height: 80px;" :title="function2" id=2 @funcSwitch="funcSwitch"></ButtonButton>
      <ButtonButton style="height: 80px;" :title="function3" id=3 @funcSwitch="funcSwitch"></ButtonButton>

    </div>

    <br>
  </div>
</template>
<script>
export default {
  data() {
    return {
      function1: '按药名检索',
      function2: '数据分析',
      function3: '数据可视化',
    }

  },
  methods: {
    funcSwitch(n) {
      this.$emit('funcSwitch', n);
    }
  }
}
</script>
<style>
.MainMain {
  font-weight: 800;
  line-height: 100px;
  text-align: center;
  font-size: 36px;
  background-color: white;
  margin-bottom: 2vh;

  min-height: 60vh;
}
</style>